<template>
    <div>
      <el-container>
        <el-header class="personal-header">
          <el-button class="btn" type="primary" icon="el-icon-back" @click="back">返回</el-button>
          <span  class="header text" v-if="isOnline">欢迎您，{{staff.name}} 职位：未设置</span>
          <span  class="header text" v-else>尚未登录</span>
          <div class="login logout">
            <el-button  v-if="isOnline" class="btn" type="primary" @click="logOut" icon="el-icon-switch-button">退出</el-button>
            <el-button v-else class="btn" icon="el-icon-user-solid" @click="dialogFormVisible=true">登录</el-button>
          </div>
        </el-header>
        <el-main>
          <el-tabs tab-position="left"
                   disable-transitions="true"
                   v-if="isOnline"
                   style="height: 85vh;">
            <el-tab-pane class="personal-pane" label="个人信息" :disabled="!isOnline">
              <PersonInfo :reload-staff="reloadStaff" :person-info="personInfo" :call-back="infoUpdate"/>
            </el-tab-pane>
            <el-tab-pane class="personal-pane" label="个人报表" :disabled="!isOnline">
              <PersonalReport :account="staff.account" key="1" :index="201"/>
            </el-tab-pane>
            <el-tab-pane class="personal-pane" label="角色管理" :disabled="true">
              <el-tooltip content="暂未开放"></el-tooltip>
            </el-tab-pane>
            <el-tab-pane class="personal-pane" label="工时管理" :disabled="true">用户工时管理</el-tab-pane>
            <el-tab-pane class="personal-pane" label="权限管理" :disabled="false">
              <PersonalPermission :permission="permission"/>
            </el-tab-pane>
            <el-tab-pane class="personal-pane" label="员工管理" :disabled="!getPermission('Pimpower')">
              <PersonalStaff :senior="senior"/>
            </el-tab-pane>
            <el-tab-pane class="personal-pane" label="个人设置" :disabled="!isOnline">个人设置</el-tab-pane>
          </el-tabs>
          <div v-else>
            请登录
          </div>
        </el-main>
        <el-dialog title="员工登录" :visible.sync="dialogFormVisible">
          <el-form :model="loginform" :rules="rules" ref="loginform">
            <el-form-item label="账号/工号"  prop="account">
              <el-input v-model="loginform.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码"  prop="password">
              <el-input type="password" v-model="loginform.password" show-password></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="login('loginform')">确 定</el-button>
          </div>
        </el-dialog>
      </el-container>
    </div>
</template>

<script>
import {login as staffLogin, Staff, updateInfo} from "./models/staff";
import PersonInfo from "./components/PersonInfo";
import PersonalReport from "./components/PersonalReport";
import PersonalPermission from "./components/PersonalPermission";
import PersonalStaff from "./components/PersonalStaff";

export default {
  name: "PersonalSpace",
  components: {PersonalStaff, PersonalPermission, PersonalReport, PersonInfo},
  data(){
    return{
      dialogFormVisible:false,
      isOnline:false,
      staff:{},
      loginform:{
        account:null,
        password:null,
      },
      //登录校验
      rules:{
        account:[
          {required:true,message:'请输入账号',trigger:'blur'}
        ],
        password: [
          {required:true,message:'请输入密码',trigger:'blur'}
        ]
      },
      personInfo:{},
      permission: {},
      senior:{},
    }
  },
  watch:{
    '$store.state.staff.isOnline':function (){
      this.isOnline=this.$store.state.staff.isOnline;
      if(this.isOnline){
        this.initInfo();
      }
    }
  },
  created() {
    this.isOnline=this.$store.state.staff.isOnline;
    if(this.isOnline){
      this.staff=this.$store.state.staff;
      this.initInfo();
    }
  },
  methods:{
    //信息更新
    infoUpdate(params){
      let staff={
        ...this.staff,
        ...params
      }
      return updateInfo(staff);
    },
    //重新加载数据
    reloadStaff(staff){
      this.staff={
        ...staff,
      }
    },
    //获取权限
    getPermission(type){
      let rs= {
        value:true,
        meaning:'',
      };
      switch (type){
        case'Pimpower':
          rs=this._func.isAllow(this._mytype.permission.Pimpower,this);break;
        default:break;
      }
      return rs.value;
    },
    //面板信息初始化
    initInfo(){
      if(this.isOnline){
        //console.log(JSON.stringify(this.staff))
        this.personInfo={name:this.staff.name,account:this.staff.account};
        this.permission={
          Pimpower:this.staff.Pimpower,
          Proot:this.staff.Proot,
          Pcash:this.staff.Pcash,
          Pplan:this.staff.Pplan,
          Ppurchase:this.staff.Ppurchase,
        }
        this.senior={name:this.staff.name,account:this.staff.account};
      }
    },
    back(){
      this._func.back(this);
    },
    //登出
    logOut(){
      console.log("logOut")
      this.$store.commit('staff/logout',this.staff);
      this.staff=null;
    },
    //登陆
    login(formName){
      console.log('login');
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //校验通过 登录
          //this.$refs[formName].submit();
          await staffLogin(this.loginform).then(success=>{
            this.$message({
              type:'success',
              message:'登陆成功'
            });
            this.dialogFormVisible = false;
            this.staff=Staff.createNew(success);
            //console.log(this.loginform.password)
            this.staff.password=this.loginform.password;
            //登陆状态更新
            this.$store.commit('staff/login',this.staff)
            this.initInfo();
          },failed=>{
            this.$message({
              type:'warning',
              message:failed.msg
            })
          })
          //console.log(this.staff)
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },

  }
}
</script>

<style scoped>
.personal-header{
  display: flex;
  height: 5vh;
  justify-content: space-between;
  background: #42b983;
  padding: 0;
}

  .btn{
    width: 5vw;
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .login,.logout{
    padding: 0;
    margin: 0;
    height:100%;
  }
  .text{
    font-size: 2rem;
  }
  .dialog-footer{
    display: flex;
    justify-content: space-around;
  }
</style>
